<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { Close, Document } from '@element-plus/icons-vue'
import { INote } from '../types/electron'
import { ElMessage, ElMessageBox } from 'element-plus'

// 最大打开标签数
const MAX_TABS = 10

// 定义props
const props = defineProps<{
  notes: INote[]
  activeNoteId: string | null
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'select', note: INote): void
  (e: 'close', note: INote): void
  (e: 'close-all', exceptId?: string): void
  (e: 'close-others', id: string): void
}>()

// 激活的标签
const activeTab = ref(props.activeNoteId)

// 监听activeNoteId变化
watch(() => props.activeNoteId, (newId) => {
  activeTab.value = newId
})

// 标签页点击事件
const handleTabClick = (note: INote) => {
  emit('select', note)
}

// 关闭标签页
const closeTab = (event: Event, note: INote) => {
  event.stopPropagation()
  emit('close', note)
}

// 显示右键菜单
const showContextMenu = (event: MouseEvent, note: INote) => {
  event.preventDefault()
  
  const menuItems = [
    {
      label: '关闭',
      click: () => emit('close', note)
    },
    {
      label: '关闭其他',
      click: () => emit('close-others', note.id)
    },
    {
      label: '关闭所有',
      click: () => emit('close-all')
    }
  ]
  
  // 调用electron的showContextMenu方法
  try {
    window.elec.showContextMenu({
      menuItems,
      x: event.clientX,
      y: event.clientY
    })
  } catch (error) {
    console.error('显示右键菜单失败', error)
  }
}

// 获取笔记的截断标题
const getTruncatedTitle = (title: string) => {
  return title.length > 20 ? title.substring(0, 20) + '...' : title
}
</script>

<template>
  <div class="tabs-container" v-if="notes.length > 0">
    <div class="tabs-wrapper">
      <div
        v-for="note in notes"
        :key="note.id"
        class="tab"
        :class="{ active: note.id === activeTab }"
        @click="handleTabClick(note)"
        @contextmenu="showContextMenu($event, note)"
      >
        <el-icon class="tab-icon"><Document /></el-icon>
        <span class="tab-title" :title="note.title">{{ getTruncatedTitle(note.title) }}</span>
        <el-icon class="tab-close" @click.stop="closeTab($event, note)"><Close /></el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tabs-container {
  width: 100%;
  height: 36px;
  background-color: var(--bg-color, #fff);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  position: relative;
}

.tabs-container::-webkit-scrollbar {
  height: 4px;
}

.tabs-container::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 2px;
}

.tabs-wrapper {
  display: flex;
  height: 100%;
}

.tab {
  display: flex;
  align-items: center;
  padding: 0 8px;
  min-width: 120px;
  max-width: 200px;
  height: 100%;
  border-right: 1px solid var(--border-color);
  cursor: pointer;
  font-size: 13px;
  position: relative;
  background-color: var(--bg-color, #fff);
  color: var(--text-color);
  transition: background-color 0.2s;
}

.tab:hover {
  background-color: var(--hover-color, rgba(0, 0, 0, 0.05));
}

.tab.active {
  background-color: var(--active-tab-bg, #e6f7ff);
  border-bottom: 2px solid var(--primary-color);
}

.tab-icon {
  margin-right: 6px;
  font-size: 14px;
  flex-shrink: 0;
}

.tab-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-close {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.6;
  flex-shrink: 0;
}

.tab-close:hover {
  opacity: 1;
  color: #f56c6c;
}
</style> 